<template>
  <div>
    <!-- 轮播图 -->
    <div class="banner">
        <el-carousel height="500px"   type="card">
          <el-carousel-item
          v-for="(item,index) in list_img"
          :key="index"
          >
          <h3>
            <img :src="item.picture" alt="" style="width:100%;height:500px;">
          </h3>
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        贫困户推荐
      </div>
      <ul>
          <!-- <li>
            <img src="../../assets/logo.png" alt="">
            <span>贫困户名称</span>
          </li> -->

          <li v-for="(item,index) in list_pinkun" :key="index" >
            <img :src="item.cover" alt="">
            <span >{{item.name}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/poorView')">查看更多</div>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        志愿者推荐
      </div>
      <ul>
          <li v-for="(item,index) in list_zhiyuanzhe" :key="index">
            <img :src="item.picture" alt="">
            <span >{{item.total}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/volunteerView')">查看更多</div>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        扶贫政策推荐
      </div>
      <ul>
          <li v-for="(item,index) in list_fupin" :key="index">
            <img :src="item.cover" alt="">
            <span >{{item.content}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/alleviationView')">查看更多</div>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        留言板推荐
      </div>
      <ul>
          <li v-for="(item,index) in list_liuyanban" :key="index">
            <img :src="item.picture" alt="">
            <span >{{item.name}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/msgboardView')">查看更多</div>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        收藏推荐
      </div>
      <ul>
          <li v-for="(item,index) in list_shoucang" :key="index">
            <img :src="item.picture" alt="">
            <span >{{item.name}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/collectionView')">查看更多</div>
    </div>
    <div class="mod-item">
      <div class="title">
        Recommend<br>
        用户推荐
      </div>
      <ul>
          <li v-for="(item,index) in list_user" :key="index">
            <img :src="item.photo" alt="">
            <span >{{item.name}}</span>
          </li>
        </ul>
        <div class="more" @click="$router.push('/userView')">查看更多</div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return{
      list_img:[],
      list_pinkun:[],
      list_zhiyuanzhe:[],
      list_fupin:[],
      list_liuyanban:[],
      list_shoucang:[],
      list_user:[],
    }
  },
  methods:{
    async getBanner(){
       let { data: res } = await this.$axios.get("/carousel/getlist")
       //window.console.log(res)
       this.list_img = res.data.list
    },
    async getPinkun(){
       let { data: res } = await this.$axios.get("/poor/getlist?pageNum=1&pageSize=2")
       this.list_pinkun = res.data.list
    },
    async getZhiyuanzhe(){
       let { data: res } = await this.$axios.get("/volunteer/getlist?pageNum=1&pageSize=2")
       this.list_zhiyuanzhe = res.data.list
    },
     async getAlleviation(){
       let { data: res } = await this.$axios.get("/alleviation/getlist?pageNum=1&pageSize=2")
       this.list_fupin = res.data.list
    },
     async getLiuyanban(){
       let { data: res } = await this.$axios.get("/msgboard/getlist?pageNum=1&pageSize=2")
       this.list_liuyanban = res.data.list
    },
     async getShoucang(){
       let { data: res } = await this.$axios.get("/collection/getlist?pageNum=1&pageSize=2")
       this.list_shoucang = res.data.list
    },
     async getUser(){
       let { data: res } = await this.$axios.get("/user/getlist?pageNum=1&pageSize=2")
       this.list_user = res.data.list
    },
  },
  created(){
    this.getBanner()
    this.getPinkun()
    this.getZhiyuanzhe()
    this.getAlleviation()
    this.getLiuyanban()
    this.getShoucang()
    this.getUser()
  }
}
</script>

<style scoped lang="scss">
.mod-item{
  width: 80%;
  margin: 0 auto;
  .title{
    font-size: 25px;
    text-align: center;
  }
  ul{
    width: 100%;
    display: flex;
    justify-content: center;
    li{
      width: 48%;
      height: 130px;
      border: 1px solid #ccc;
      margin: 3px;
      border-radius: 5px;
      box-shadow: 10px 10px 5px #999;
      img{
        width: 130px;
        height: 130px;
        border-radius: 50%;
      }
      span{
        display: inline-block;
        margin: -80px auto;
        text-align: center;
        display: block;
      }
    }
  }
  .more{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 2px solid skyblue;
    margin: 10px auto;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
}
</style>

